<!-- 医院报销比例维护主页面 -->
<template>
  <div class="hospital-ratio-page">
    <div class="page-header">
      <h2>医院报销比例维护</h2>
      <div class="header-buttons">
        <el-button type="primary" @click="$router.push('/medical-info/hospital-ratio-3')">
          三级医院
        </el-button>
        <el-button type="success" @click="$router.push('/medical-info/hospital-ratio-2')">
          二级医院
        </el-button>
        <el-button type="warning" @click="$router.push('/medical-info/hospital-ratio-1')">
          一级医院
        </el-button>
      </div>
    </div>
    <div class="page-content">
      <el-card class="info-card">
        <h3>功能说明</h3>
        <p>本模块用于维护不同等级医院的报销比例，包括：</p>
        <ul>
          <li>三级医院报销比例设置</li>
          <li>二级医院报销比例设置</li>
          <li>一级医院报销比例设置</li>
          <li>人员类别差异化配置</li>
        </ul>
      </el-card>
      
      <div class="ratio-overview">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="ratio-card level3">
              <h4>三级医院</h4>
              <p>适用于大型综合医院</p>
              <el-button type="primary" size="small" @click="$router.push('/medical-info/hospital-ratio-3')">
                配置管理
              </el-button>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="ratio-card level2">
              <h4>二级医院</h4>
              <p>适用于中型医院</p>
              <el-button type="success" size="small" @click="$router.push('/medical-info/hospital-ratio-2')">
                配置管理
              </el-button>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="ratio-card level1">
              <h4>一级医院</h4>
              <p>适用于基层医疗机构</p>
              <el-button type="warning" size="small" @click="$router.push('/medical-info/hospital-ratio-1')">
                配置管理
              </el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
// 页面逻辑
</script>

<style scoped>
.hospital-ratio-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e4e7ed;
}

.header-buttons {
  display: flex;
  gap: 10px;
}

.page-content {
  margin-top: 20px;
}

.info-card {
  margin-bottom: 20px;
}

.info-card h3 {
  color: #409eff;
  margin-bottom: 10px;
}

.info-card ul {
  margin-left: 20px;
}

.info-card li {
  margin-bottom: 5px;
}

.ratio-overview {
  margin-top: 20px;
}

.ratio-card {
  text-align: center;
  padding: 20px;
}

.ratio-card h4 {
  margin-bottom: 10px;
  font-size: 18px;
}

.ratio-card p {
  color: #666;
  margin-bottom: 15px;
}

.level3 {
  border-left: 4px solid #409eff;
}

.level2 {
  border-left: 4px solid #67c23a;
}

.level1 {
  border-left: 4px solid #e6a23c;
}
</style>
